import React,{Component} from 'react'
import { Card,Form,Select,DatePicker,Button,Input } from 'antd';
const FormItem = Form.Item
const SelectOption = Select.Option
class BaseForm extends Component {
    getOptionList(data) {
        if(!data){
            return []
        }
        let options=[]
        data.map((item,i) => {
            options.push(<SelectOption value={item.value} key={i}>{item.name}</SelectOption>)
        })
        return options
    }
    formItemList() {
        const formList = this.props.formList
        const { getFieldDecorator } = this.props.form
        const formItemList = []
        if(formList && formList.length > 0) {
            formList.forEach((item,i) => {
                const type = item.type
                const field = item.field
                const label = item.label || ''
                const placeholder = item.placeholder || ''
                const initialValue = item.initialValue || ''
                const width = item.width || 100
                if(type==='时间查询') {
                    const start_time =  <FormItem label="订单时间" key='start_time'>
                        {
                            getFieldDecorator('begin_time')(
                                <DatePicker showTime={true} placeholder="选择开始时间" format="YYYY-MM-DD HH:mm:ss"/>
                            )
                        }
                    </FormItem>
                    formItemList.push(start_time)
                    const end_time =  <FormItem label="~" colon={false} key='end_time'>
                        {
                            getFieldDecorator('end_time')(
                                <DatePicker showTime={true} placeholder="选择结束时间" format="YYYY-MM-DD HH:mm:ss"/>
                            )
                        }
                    </FormItem>
                    formItemList.push(end_time)
                }else if(type==='DATE') {
                    const fire_time =  <FormItem label={label} key='fire_time'>
                        {
                            getFieldDecorator('fire_time')(
                                <DatePicker showTime={true} placeholder={placeholder} format="YYYY-MM-DD HH:mm:ss"/>
                            )
                        }
                    </FormItem>
                    formItemList.push(fire_time)
                }else if(type==='INPUT') {
                    const select = <FormItem label={label} key={field}>
                        {
                            getFieldDecorator([field],{
                                initialValue:initialValue
                            })(
                                <Input style={{width:width}} placeholder={placeholder}/>
                            )
                        }
                    </FormItem>
                    formItemList.push(select)
                }else if(type==='城市') {
                    const select = <FormItem label='城市' key='city'>
                        {
                            getFieldDecorator('city',{
                                initialValue:0
                            })(
                                <Select style={{width:150}}>
                                    <SelectOption value={0}>全部</SelectOption>
                                    <SelectOption value={1}>北京</SelectOption>
                                    <SelectOption value={2}>上海</SelectOption>
                                    <SelectOption value={3}>天津</SelectOption>
                                    <SelectOption value={4}>杭州</SelectOption>
                                </Select> 
                            )
                        }
                    </FormItem>
                    formItemList.push(select)
                }else if(type==='SELECT') {
                    const select = <FormItem label={label} key={field}>
                        {
                            getFieldDecorator([field],{
                                initialValue:initialValue
                            })(
                                <Select style={{width:width}}>
                                    {this.getOptionList(item.list)}
                                </Select> 
                            )
                        }
                    </FormItem>
                    formItemList.push(select)
                }

            })
        }
        return formItemList
    }
    handleQuery = () => {
        const data = this.props.form.getFieldsValue()
        this.props.handleQuery(data)  //调用父组件方法
    }
    handleReset = () => {
        this.props.form.resetFields()
    }
    render() {
        return (
            <Form layout="inline">
                {this.formItemList()}
                <FormItem>
                    <Button type="primary" onClick={this.handleQuery}>查询</Button>
                </FormItem>
                <FormItem>
                    <Button onClick={this.handleReset}>重置</Button>
                </FormItem>
            </Form>
        )
    }
}

export default Form.create({})(BaseForm)